<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>补贴提现</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            background-color: #fff;
        }

        .wrap {
            width: 100%;
            padding: 0 15px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .wrap ul {
            width: 100%;
            overflow: hidden;
        }

        .wrap ul li {
            width: 100%;
            display: flex;
            height: 50px;
            border: none;
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;
            background-image: linear-gradient(0, #EEEEEE, #EEEEEE 50%, transparent 50%);
            background-image: -webkit-linear-gradient(90deg, #EEEEEE, #EEEEEE 50%, transparent 50%);
            overflow: hidden;
        }

        .wrap ul li div.icon {
            width: 20px;
            height: 20px;
            background: url(../../image/tb_icon.png) no-repeat;
            background-size: 100% 100%;
            margin-top: 15px;
        }

        .wrap ul li div.tb_order {
            width: auto;
            height: 50px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FF5300;
            line-height: 50px;
            margin-left: 8.5px;
        }

        .wrap ul li div.note {
            width: auto;
            height: 50px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 50px;
            margin-left: 33px;
        }

        .wrap ul li div.note input {
            display: block;
            width: 100%;
            height: 12px;
            line-height: 12px;
            color: #333333;
            margin-top: 19px;
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 12px;
        }

        .wrap ul li div.text {
            width: 75px;
            height: 50px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 50px;
        }

        .wrap ul li div.acount {
            width: auto;
            height: 50px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 50px;
            margin-left: 45px;
        }

        .wrap ul li div.status {
            width: 50px;
            height: 20px;
            background: linear-gradient(266deg, #7D0DFC, #D116FD);
            border-radius: 10px;
            margin-top: 15px;
            margin-left: 65px;
            font-size: 11px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 20px;
            text-align: center;
        }

        .submit {
            width: 100%;
            height: 35px;
            background: linear-gradient(266deg, #7D0DFC, #D116FD);
            border-radius: 17.5px;
            margin-top: 30.5px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 35px;
            text-align: center;
        }

        .wrap .tips {
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
            text-align: center;
            margin-top: 10.5px;
        }

        .verify {
            width: 100%;
            margin-top: 35px;
            overflow: hidden;
        }

        .verify div.title {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            /*margin-top: 15px;*/
        }

        .verify div.content {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            margin-top: 15px;
        }

        .arrow {
            width: 8px;
            height: 13px;
            margin-top: 18.5px;
        }

        .arrow img {
            width: 100%;
            height: 100%;
        }

        .unbounded {
            width: auto;
            height: 50px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 50px;
            margin-left: auto;
            margin-right: 5px;
        }
        [v-cloak] {
            display: none!important;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="wrap">
            <ul>
                <li>
                    <div class="text">支付宝账号</div>
                    <div class="acount" v-if='zfbAccount'>{{zfbAccount}}</div>
                    <div class="status" v-if='zfbAccount' @click='modifyAcount(0)'>修改</div>
                    <div class="unbounded" v-if='!zfbAccount' @click='modifyAcount(1)'>未绑定</div>
                    <div class="arrow" v-if='!zfbAccount'><img src="../../image/arrow_right.png" alt=""></div>
                </li>
                <li>
                    <div class="text">真实姓名</div>
                    <div class="acount" v-if='truename'>{{truename}}</div>
                    <div class="arrow"></div>
                </li>
                <li>
                    <div class="icon"></div>
                    <div class="tb_order">淘宝订单</div>
                    <div class="note"><input type="text" placeholder='返回淘宝复制订单' v-model='order_number'></div>
                </li>
            </ul>

            <div class="submit" @click='submit()'>提交</div>
            <div class="tips">*请7天内完成认证，交易成功后预计次月21日返款</div>
            <div class="verify">
                <div class="title">验证失败原因</div>
                <div class="content">
                    <p>1. 该订单已被验证，请勿重复验证;</p>
                    <p>2. 已超过订单验证的7天期限;</p>
                    <p>3. 该订单已失效; </p>
                    <p>4. 该订单的商品非活动页内的商品;</p>
                    <p>5. 参与活动的用户仅可享受1次免单补贴;</p>
                    <p>6. 该笔订单已超过1件商品限制，不予补贴，建议退款重新下单验证;</p>
                    <p>7. 新人注册成为会员并完成淘宝账号渠道授权之后，才可领取0元购补贴;</p>
                    <p>8. 每个用户每天仅限领取一次0元购补贴;</p>
                    <p>9. 每位用户领取补贴的总金额与用户购物及推广获得的总佣金有关，用户个人收益金额越高，可领取的补贴次数越多;</p>
                    <p>10. 该订单未使用优惠券，不予补贴，建议退款重新下单验证;</p>
                    <p>11. 因订单同步会延迟，请核对订单号15分钟后再次尝试验证。 若2小时后还显示无法验证，建议申请退款重新下单验证。其他活动原因请查看活动规则。
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript">
    apiready = function() {
        console.log($api.getStorage('zfbAccount'));
        console.log($api.getStorage('truename'));
        vm.init()

        api.addEventListener({
            name: 'refreshuserinfo'
        }, function(ret, err) {
            if (ret) {
                vm.init()
            } else {
                alert(JSON.stringify(err));
            }
        });

    }
    var vm = new Vue({
        el: '#app',
        data: {
            zfbAccount: '',
            truename: '',
            order_number: ''
        },
        methods: {
            init: function() {
                if ($api.getStorage('zfbAccount') != null) {
                    vm.zfbAccount = $api.getStorage('zfbAccount');
                } else {
                    vm.zfbAccount = '';
                }
                if ($api.getStorage('truename') != null) {
                    vm.truename = $api.getStorage('truename');
                } else {
                    vm.truename = '';
                }
            },
            modifyAcount: function(id) {
                cl.openWin({
                    name: 'modify_zfb',
                    pageParam: {
                        id: id
                    }
                })
            },
            submit: function() {
                if (!vm.order_number) {
                    cl.toast({
                        msg: '请输入订单号'
                    })
                    return;
                }
                console.log(vm.acount);
                api.ajax({
                    url: cl.apiServer + 'zeroBuyOrder/savaZeroBuyOrder',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token:cl.userToken
                    },
                    data: {
                        body: {
                            orderId: vm.order_number,
                            zfbAccount: vm.zfbAccount,
                            mid: cl.mid,
                            truename: vm.truename,
                            version:cl.deviceInfo().appVersion,
                            mobileInfo:cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    // console.log(JSON.stringify(ret));
                    if (ret) {
                        if (ret.code == 0) {
                            cl.toast({
                                msg: '提交成功'
                            });
                            setTimeout(function() {
                                cl.openWin({
                                    name: '../main/order_details'
                                })
                            }, 500)
                        }else if (ret.code == 401) {
                          cl.openWin({
                              name: '../login/code_login'
                          })

                        }else {
                            cl.toast({
                                msg: ret.message
                            })
                        }
                    }
                })
            }
        }
    });
</script>
